import 'package:demo_app_video/commons/commons.dart';
import 'package:demo_app_video/commons/router/routes.dart';
import 'package:demo_app_video/commons/sp.dart';
import 'package:demo_app_video/store/user.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:async';
import '../commons/http/http.dart';
import '../commons/toast.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  TextEditingController _mobile = TextEditingController();
  TextEditingController _ver_code = TextEditingController();
  String inputText = '';
  String ver_code_text = '';
  bool agree = false;
  @override
  initState() {
    super.initState();
    _mobile = TextEditingController.fromValue(TextEditingValue(
        text: inputText,
        selection: TextSelection.fromPosition(TextPosition(
            offset: inputText.length, affinity: TextAffinity.upstream))));

    _ver_code = TextEditingController.fromValue(TextEditingValue(
        text: ver_code_text,
        selection: TextSelection.fromPosition(TextPosition(
            offset: ver_code_text.length, affinity: TextAffinity.upstream))));
  }

  var tip = '发送验证码';
  var second = 60;
  var _interval;

  send_sms() async {
    Commons().closeBoard(context);
    if (_interval != null) {
      return;
    }

    //请求发送验证码
    var resultData = await HttpUtil().post('sms/send',
        data: {'mobile': inputText.toString(), 'event': 'mobilelogin'});
    if (resultData['code'] != 1) {
      Toast.getInstance().showError(msg: resultData['msg']);
      return;
    }
    _interval = Timer.periodic(Duration(seconds: 1), (timer) {
      second--;
      if (second <= 0) {
        _interval.cancel();
        tip = '发送验证码';
      } else {
        tip = '${second}秒后重发';
      }
      setState(() {});
    });
  }

  login() async {
    if (agree == false) {
      Toast.getInstance().showError(msg: '请勾选用户协议!');
      return;
    }
    print({'mobile': inputText, 'captcha': ver_code_text});
    var resultData = await HttpUtil.getInstance().post('user/mobilelogin',
        data: {'mobile': inputText, 'captcha': ver_code_text});
    if (resultData['code'] != 1) {
      Toast.getInstance().showError(msg: resultData['msg']);
      return;
    }
    //设置用户信息并且存储
    $UserStore.token = resultData['data']['userinfo']['token'];
    Sp().setSp(Sp.userKey, $UserStore.token);
    //并且存储用户信息
    await $UserStore.setUserInfo();
    Routes().popNowPage(context);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    if (_interval != null) {
      _interval.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffFFFFFF),
      body: Stack(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
          ),
          Image.asset(
            'images/login_bg.png',
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.fill,
          ),

          SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  margin: EdgeInsets.only(
                      top: MediaQuery.of(context).padding.top + 106.h),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Container(
                      //   margin: EdgeInsets.only(left: 46.w),
                      //   child: Image.asset(
                      //     'images/login_font_zi.png',
                      //     width: 224.w,
                      //   ),
                      // ),
                      Container(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Image.asset(
                              'images/logo_login_p.png',
                              width: 70.w,
                              height: 70.w,
                              fit: BoxFit.fill,
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  '欢迎来到黄苹果免费短剧',
                                  style: TextStyle(
                                      color: Color(0xff333333),
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.bold),
                                ),
                                Text(
                                  '快来登录吧~',
                                  style: TextStyle(
                                      fontSize: 12.sp,
                                      color: Color(0xff999999)),
                                )
                              ],
                            )
                          ],
                        ),
                      ),
                      Container(
                        height: 24.h,
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 16.w),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(16.sp),
                            boxShadow: [
                              BoxShadow(
                                  color: Color.fromRGBO(20, 20, 20, 0.1),
                                  offset: Offset(0, 2.w),
                                  blurRadius: 8.w,
                                  spreadRadius: 0)
                            ]),
                        width: 328.w,
                        height: 350.h,
                        padding: EdgeInsets.only(top: 50.h, left: 24.w),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              margin: EdgeInsets.only(top: 4.h),
                              child: Text(
                                '手机号',
                                style: TextStyle(
                                    fontSize: 16.sp,
                                    color: Color(0xff1A1A1A),
                                    fontWeight: FontWeight.w500),
                              ),
                            ),
                            Container(
                              width: 280.w,
                              height: 44.w,
                              decoration: BoxDecoration(
                                  border: Border(
                                      bottom: BorderSide(
                                          width: 1.sp,
                                          color: Color(0xffF2F2F2)))),
                              child: TextField(
                                onChanged: (value) {
                                  if (value != inputText) {
                                    inputText = value;
                                    setState(() {});
                                  }
                                },
                                controller: _mobile,
                                decoration: InputDecoration(
                                    border: UnderlineInputBorder(
                                        borderSide: BorderSide.none),
                                    hintText: '请输入手机号',
                                    hintStyle: TextStyle(
                                        color: Color(0xffBFBFBF),
                                        fontSize: 15.sp)),
                              ),
                            ),
                            //手机号
                            Container(
                              margin: EdgeInsets.only(top: 18.h),
                              child: Text(
                                '验证码',
                                style: TextStyle(
                                    fontSize: 16.sp,
                                    color: Color(0xff1A1A1A),
                                    fontWeight: FontWeight.w500),
                              ),
                            ),
                            Container(
                              width: 280.w,
                              height: 44.w,
                              decoration: BoxDecoration(
                                  border: Border(
                                      bottom: BorderSide(
                                          width: 1.sp,
                                          color: Color(0xffF2F2F2)))),
                              child: Row(
                                children: [
                                  Expanded(
                                      child: TextField(
                                    controller: _ver_code,
                                    onChanged: (value) {
                                      if (value != ver_code_text) {
                                        ver_code_text = value;
                                        setState(() {});
                                      }
                                    },
                                    decoration: InputDecoration(
                                        border: UnderlineInputBorder(
                                            borderSide: BorderSide.none),
                                        hintText: '请输入验证码',
                                        hintStyle: TextStyle(
                                            color: Color(0xffBFBFBF),
                                            fontSize: 15.sp)),
                                  )),
                                  GestureDetector(
                                    child: Text(
                                      '${tip}',
                                      style:
                                          TextStyle(color: Color(0xffFF0000)),
                                    ),
                                    onTap: () => send_sms(),
                                  )
                                ],
                              ),
                            ),
                            // yanzhengma
                            Container(
                              height: 48.h,
                            ),
                            GestureDetector(
                              child: Image.asset(
                                'images/login_btn_view.png',
                                width: 280.w,
                              ),
                              onTap: () => login(),
                            ),
                            Container(
                              height: 16.h,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                InkWell(
                                  child: Image.asset(
                                    '${agree ? 'images/login_duigou.png' : 'images/login_circle_xieyi.png'}',
                                    width: 10.w,
                                  ),
                                  onTap: () {
                                    if (agree) {
                                      agree = false;
                                    } else {
                                      agree = true;
                                    }
                                    setState(() {});
                                  },
                                ),
                                Container(
                                  width: 4.w,
                                ),
                                InkWell(
                                  onTap: () {
                                    if (agree) {
                                      agree = false;
                                    } else {
                                      agree = true;
                                    }
                                    setState(() {});
                                  },
                                  child: Text(
                                    '已阅读并同意',
                                    style: TextStyle(
                                        color: Color(
                                            agree ? 0xffF98E4B : 0xff767676),
                                        fontSize: 12.sp),
                                  ),
                                ),
                                InkWell(
                                  child: Text(
                                    '《用户协议》',
                                    style: TextStyle(
                                        color: Color(
                                            agree ? 0xffF98E4B : 0xff333333),
                                        fontSize: 12.sp),
                                  ),
                                  onTap: () {
                                    Routes().push(context, Routes.webview, {
                                      'url_text':
                                          'https://hpg.rongqide.cn/article/用户协议.html'
                                    });
                                  },
                                ),
                                InkWell(
                                  child: Text(
                                    '《隐私政策》',
                                    style: TextStyle(
                                        color: Color(
                                            agree ? 0xffF98E4B : 0xff333333),
                                        fontSize: 12.sp),
                                  ),
                                  onTap: () {
                                    Routes().push(context, Routes.webview, {
                                      'url_text':
                                          'https://hpg.rongqide.cn/article/隐私政策.html'
                                    });
                                  },
                                )
                              ],
                            )
                          ],
                        ),
                      ),
                      // Container(
                      //   alignment: Alignment.center,
                      //   margin: EdgeInsets.only(top: 30.h),
                      //   child: Column(
                      //     crossAxisAlignment: CrossAxisAlignment.center,
                      //     children: [
                      //       Image.asset(
                      //         'images/login_btn_other_text.png',
                      //         width: 216.w,
                      //       ),
                      //       Container(
                      //         height: 20.h,
                      //       ),
                      //       Image.asset(
                      //         'images/wx_icon.png',
                      //         width: 36.w,
                      //       )
                      //     ],
                      //   ),
                      // )
                    ],
                  ),
                ),
              ],
            ),
          ),

          //中间登录页面

          //中间登录页面

          Container(
            margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            width: 360.w,
            height: 44.h,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                InkWell(
                  child: Container(
                    margin: EdgeInsets.only(left: 20.w),
                    child: Image.asset(
                      'images/back_arrow.png',
                      width: 16.w,
                      height: 16.h,
                    ),
                  ),
                  onTap: () => Routes().popNowPage(context),
                ),
                Container(
                  child: Text(
                    '登录',
                    style: TextStyle(color: Color(0xff333333), fontSize: 16.sp),
                  ),
                ),
                Container(
                  width: 36.w,
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
